<template>
	<view class="forget-pass_wrapper">
		<view class="from_item_lists">
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/shouji.svg"></image> -->
				<text class="item_title_top">手机号码</text>
			</view>
			<input type="text" v-model="mobile" placeholder="请输入手机号码" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/information.svg"></image> -->
				<text>验证码</text>
			</view>
			<input type="text" v-model="verifyCode" placeholder="请输入手机验证码" class="item_title_input" />
			<button type="warn" size="mini" class="verify_btn" :disabled='disabledVerify' @click="getVerifyCode">{{codeText}}</button>
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
				<text>新密码</text>
			</view>
			<input type="password" v-model="newPassword" placeholder="请输入新密码" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
				<text>确认新密码</text>
			</view>
			<input type="password" v-model="confirmNewPassword" placeholder="请确认新密码" />
		</view>
		</view>
		<button type="warn" class="form_btn" :disabled='disabledSubmit' @click="onConfirmReset">确认重置</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '', 					// 手机号
				verifyCode: '', 				// 验证码
				newPassword:'', 				// 新的密码
				confirmNewPassword:'',			// 确认新密码
				codeText: '获取验证码', 			// 验证码按钮文本
				countdown: 60,	 				// 倒计时
				disabledVerify:false,   		// 禁用验证码按钮
				disabledSubmit:false,			// 禁用提交按钮
				interval:null          // 倒计时定时器
			}
		},
		methods: {
			// 倒计时
			countDownFn(){
				this.codeText = '60S';
				this.disabledVerify = true;
				this.interval = setInterval(() => {
					this.countdown--;
					if (this.countdown > 0){
						this.codeText = this.countdown + 'S';
					} else {
						clearInterval(this.interval);
						this.countdown = 60;
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
				}, 1000)
			},
			
			// 验证手机号
			verifyMobileFn(){
				if (this.mobile === '') {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					});
					return false;
				};
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title:'手机号格式有误',
						icon:'none'
					})
					return false;
				}
			},
			
			// 获取验证码
			getVerifyCode() {
				if (this.mobile === '') {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title:'手机号格式有误',
						icon:'none'
					})
					return
				}

				if (this.countdown !== 60) return;
				
				this.countDownFn();
				
				this.$api.getVerifyCode({
					mobile: this.mobile,
					type: 'forget'
				}, res => {
					if(res.data.type !== 'ok') {
						// 用户名不存在
						clearInterval(this.countDownInterval);
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
					uni.showToast({
						title:res.data.message,
						icon:'none'
					});
				})
			},
			
			// 确认重置
			onConfirmReset() {
				if (this.mobile === '') {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title:'手机号格式有误',
						icon:'none'
					})
					return
				}
				if (this.verifyCode == '') {
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					});
					return
				};
				if (this.newPassword == '') {
					uni.showToast({
						title:'请设置新密码',
						icon:'none'
					});
					return
				};
				if (this.newPassword.length < 6 || this.newPassword.length > 16) {
					uni.showToast({
						title:'密码必须在6到16位之间',
						icon:'none'
					});
					return
				}
				if (this.confirmNewPassword !== this.newPassword) {
					uni.showToast({
						title:'两次输入的密码不一致',
						icon:'none'
					});
					return
				}
				
				this.disabledSubmit = true  //禁用按钮，避免重复提交
				
				this.$api.forgetPass({
					mobile: this.mobile,
					password: this.newPassword,
					msg_code: this.verifyCode
				}, (res) => {
					if (res.data.type === 'ok') {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1500)
					} else {
						this.disabledSubmit = false
					}
					uni.showToast({
						title:res.data.message,
						icon:'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.forget-pass_wrapper{
	height:100vh;
	background-color:#F7F7F7;
	overflow:hidden;
	padding:20upx 20upx;
	box-sizing: border-box;
	.from_item_lists{
		background-color: #fff;
		padding:20upx 20upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		box-shadow: 0 0 1upx 1upx rgba(6,0,1,0.07);
		border-radius: 10upx;
	.form_item{
		position:relative;
		// margin-top:40upx;
		.item_title{
			// display: flex;
			// justify-content: flex-start;
			// align-items: center;
			// height:50upx;
			// image{
			// 	width:40upx;
			// 	height:40upx;
			// 	margin:0 20upx 0 40upx;
			// }
			text{
				display: block;
				font-size: 14px;
				margin: 30upx 0;
			}
		}
		input{
			display: block;
			width:100%;
			height:50upx;
			line-height:50upx;
			// margin-left:40upx;
			position:relative;
			// border-bottom: 1px solid rgba(0,0,0,0.1);
		}
		input:after{
		    content:"";
			position:absolute;
		    bottom:0;
		    left:0;
		    right:0;
		    border-top:1px solid rgba(0,0,0,0.1);
		    -webkit-transform:scaleY(.5);
		    -webkit-transform-origin:0 0;
		}
		.verify_btn{
			position:absolute;
			top:62upx;
			right:20upx;
			z-index:999;
			border-radius: 50upx;
			background-color: #E03E4D;
		}
	}
	.item_title_top{
		margin-top: 0!important;
	}
	.item_title_input{
		width: 77%!important;
	}
	}
	.form_btn{
		position: fixed;
		bottom: 100upx;
		left: 0;
		transform: translateX(5%);
		width:90%;
		// margin-top:60upx;
		border-radius: 50upx;
		background-color: #E03E4D;

	}
}
</style>
